DAY20 - DOM前暖身之HTML

14th鐵人賽

Noelle

2022-09-23 16:09:44

606 瀏覽

分享至

前言

沒想到居然已經20天了!?在進入DOM的世界以前先來複習一下HTML和CSS，所以今天就來聊HTML吧。

HTML 超文本標記語言

其實網頁就是瀏覽器解析了HTML文件後所展現的樣貌，而HTML文件裡則放置著各式各樣的標籤內容來呈現出我們希望的網頁排版結果。

直接上例子來認識HTML標籤語法吧：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
		<h1>Hi!這是標題哦</h1>
		<a href="https://www.google.com/">這是超連結哦</a>
  </body>
</html>

<!DOCTYPE html>

這個語法一定會出現在每個標準的HTML文件第一行，用意是告訴瀏覽器這是一份HTML所撰寫的文件，讓瀏覽器能夠正確進行解讀。
<html lang=”en”></html>

每個HTML文件也一定會有一個html標籤，代表著整份文件的根元素，而整個網頁中的所有元素將都包含在這個標籤裡面。
<head></head>

head就是整個網頁的頭部，該區塊內的內容雖然不會直接顯示在網頁畫面上給使用者看，但它有個重要的任務就是宣告網頁裡面包含的資訊(如網頁標題和圖示、CSS的連結及裝載有關該文件的作者、關鍵字等)，常見被包含在head裡的標籤有：
- <meta />
  
  描述HTML文件的metadata，可以設定很多不同類型的網頁資訊，常見像是charset指定網頁所使用的編碼、author網頁作者資訊、viewport螢幕上瀏覽器的可視區域
- <link />
  
  用於連結CSS樣式表或網頁圖示等。
- <title></title>
  
  裝載網頁標題名稱。
- <style></style>
  
  可以直接在HTML文件內寫入CSS樣式讓瀏覽器知道怎麼渲染頁面
<body></body>

代表整個網頁的主體，主要用於呈現網頁中使用者可以看到的主要內容，裡面會包含各種不同的HTML標籤架構出網頁內容。

HTML語法與結構

從上面的例子可以發現尖括號<>用代表HTML標籤，而大多數時候標籤是成對的(有開頭就有結束)，但仍有少數的標籤只需要使用單個標籤即可(如img)。

此外，有的開頭標籤會在名稱後面空一格後加入其他內容(如body的a標籤內有href)，這些內容稱為標籤的屬性(可以看到href內有個網址的字串，這段字串稱為屬性的設定值)，而大多數的標籤都有其對應的屬性可以進行操作。

最後要提一下的是標籤的結構必須是對稱且呈現巢狀關係，不可以不同標籤的開頭結尾標籤混亂交錯，從網頁的巢狀關係也可以知道其元素之間會存在階層關係(父元素及子元素)。

<body>
	<div>
	  <!-- 父元素div & 子元素h1、p -->
		<h1>Title</h1>
		<!-- 父元素p & 子元素strong -->
		<p>
            <strong>Lorem ipsum dolor</stong> sit amet consectetur adipisicing elit.
       </p>
	</div>
</body>